<template>
    <view class="imageBox">
        <block v-if="groupQrcode">
            <view class="qrcodeTop bg-theme col-fff flex">
                <view class="titleBox">
                    <view class="title font20 fontBold">{{isAdviser?'咨询':''}}</view>
                    <view class="desc font12 top-10">{{isAdviser?'了解详情':'讨论群、认筹群、板块群'}}</view>
                </view>
                <image class="wxIcon" src="https://image.srea.org.cn/xcx/qrcode-wx-img.png" mode="widthFix"></image>
            </view>
            <image class="qrcodeImage" :src="qrcode" mode="aspectFill" @click="previewQrcode" />
            <view class="joinMsg font13">
                与<text class="font18 fontBold">150000</text>名购房者交流信息
            </view>
            <view class="btn bg-theme font18 col-fff">
                长按识别
            </view>
        </block>
        <block v-else>
            <image class="qrcodeImage" :src="qrcode" mode="aspectFill" @click="previewQrcode" />
        </block>
    </view>
</template>

<script>
	export default {
		props:{
            groupQrcode: {
                value: Boolean,
                default: true
            },
			qrcode: {
                value: String,
                default: ""
            },
            isAdviser: {
                value: Boolean,
                default: false
            }
		},
		methods:{
			//预览二维码
			previewQrcode(){
				uni.previewImage({
					current: 0,
					urls: [this.qrcode],
				})
			}
		}
	}
</script>

<style scoped lang="scss">
    .imageBox{
    	text-align: center;
        border-radius: 15rpx;
        border: 1rpx solid $theme-color;
        .qrcodeTop{
            justify-content: space-between;
            padding: 0rpx 30rpx;
            height: 150rpx;
            .titleBox{
                text-align: left;
            }
            .title,.desc{
                text-shadow: 2rpx 2rpx 2rpx $theme-color;
            }
            .wxIcon{
                width: 135rpx;
            }
        }
    	.qrcodeImage{
    		margin: 40rpx auto;
    		width: 350rpx;
    		height: 350rpx;
    	}
        .btn{
            width: 70%;
            margin: 40rpx auto;
            height: 80rpx;
            line-height: 80rpx;
            border-radius: 40rpx;
        }
    }
</style>
